import { ExclamationCircleOutlined } from '@ant-design/icons';
import {
  Button,
  Empty,
  Modal,
  Space,
  Table,
  Tag,
  Typography,
  Spin,
  message,
} from 'antd';
import type { FC, ReactNode } from 'react';
import { memo, useState } from 'react';
import styles from '@/assets/css/Common.module.scss';
import { QuestionSearch, Pagination } from '@/components';
import useLoadQuestionList from '@/hooks/useLoadQuestionList';
import {
  updateQuestionList,
  deleteQuestionList,
} from '@/services/question';
import { useRequest } from 'ahooks';

interface IProps {
  children?: ReactNode;
}

const { Title } = Typography;
const { confirm } = Modal;

const Trash: FC<IProps> = () => {
  const [selectedIds, setSelectedIds] = useState<string[]>([]);
  const { data, loading, refresh } = useLoadQuestionList({ isDeleted: true });
  const { list = [], total = 0 } = data || {};

  const tableColumns = [
    {
      title: '问卷名称',
      dataIndex: 'title',
    },
    {
      title: '是否发布',
      dataIndex: 'isPublished',
      render: (isPublished: boolean) => {
        return isPublished ? (
          <Tag color="processing">已发布</Tag>
        ) : (
          <Tag>未发布</Tag>
        );
      },
    },
    {
      title: '答卷数量',
      dataIndex: 'answerCount',
    },
    {
      title: '创建时间',
      dataIndex: 'createAt',
    },
  ];

  const { run: recover } = useRequest(
    async () => {
      for await (const id of selectedIds) {
        await updateQuestionList(id, { isDeleted: false });
      }
    },
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('恢复成功');
        refresh();
        setSelectedIds([]);
      },
    }
  );

  const { run: deleteQuestion } = useRequest(
    async () => await deleteQuestionList(selectedIds),
    {
      manual: true,
      debounceWait: 500,
      onSuccess: () => {
        message.success('删除成功');
        refresh();
        setSelectedIds([]);
      },
    }
  );

  const del = () => {
    confirm({
      title: '确认彻底删除该问卷吗？',
      icon: <ExclamationCircleOutlined />,
      content: `删除以后不可以找回？`,
      onOk: deleteQuestion,
    });
  };

  const TableElem = (
    <>
      <div style={{ marginBottom: '16px' }}>
        <Space>
          <Button
            type="primary"
            disabled={selectedIds.length === 0}
            onClick={recover}
          >
            恢复
          </Button>
          <Button danger disabled={selectedIds.length === 0} onClick={del}>
            彻底删除
          </Button>
        </Space>
      </div>
      <Table
        dataSource={list}
        columns={tableColumns}
        pagination={false}
        rowKey={(q: any) => q._id}
        rowSelection={{
          type: 'checkbox',
          onChange: (selectedRowKeys) => {
            setSelectedIds(selectedRowKeys as string[]);
          },
        }}
      />
    </>
  );

  return (
    <>
      <div className={styles.header}>
        <div className={styles.left}>
          <Title level={3}>回收站</Title>
        </div>
        <div className={styles.right}>
          <QuestionSearch />
        </div>
      </div>
      <div className={styles.content}>
        {loading ? (
          <div style={{ textAlign: 'center' }}>
            <Spin />
          </div>
        ) : list.length === 0 ? (
          <Empty description="暂无数据" />
        ) : (
          list.length > 0 && TableElem
        )}
      </div>
      <div className={styles.footer}>
        <Pagination total={total} />
      </div>
    </>
  );
};

export default memo(Trash);
